<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俞佑桑的通讯录</title>
    <link rel="stylesheet" href="../css/mailList.css">
</head>
<body>
    <div class="navi">
        <div class="left">
            <div class="item">
                <img src="https://serio.gitee.io/medias/logo.png" alt="">
                <span style="color: #eee;">沈俞佑202031061479</span>
            </div>
        </div>
        <div class="right">
            <div class="item">
                <img src="" alt="">
                <span onclick="about()">关于我</span>
            </div>
            <div class="item">
                <img src="" alt="">
                <a href="https://serio.gitee.io/">我的博客</a>
            </div>
            <div class="item">
                <a href="https://gitee.com/Serio">我的仓库</a>
                <img src="https://gitee.com/static/images/logo-black.svg?t=158106664" alt="">
            </div>
        </div> 
    </div>

    <ul class="mail-list card">
        <li class="me">
            <h3>我的信息</h3>
            <div class="info">
                <img src="https://img1.baidu.com/it/u=1936314775,1023060290&fm=26&fmt=auto" alt="">
                <ul class="text">
                    <li>
                        <span>ID</span>
                        <span class="ID" ></span>
                    </li>
                    <hr>
                    <li>
                        <span>姓名</span>
                        <span class="username"></span>
                    </li>
                    <hr>
                    <li>
                        <span>电话</span>
                        <span class="phonenum"></span>
                    </li>
                    <hr>
                    <li>
                        <span>Made By</span>
                        <span>沈俞佑202031061479</span>
                    </li>
                    <hr>
                    <div class="options">
                        <span onclick="add()">增</span>
                        <span onclick="deleteFunc()">删</span>
                        <span onclick="change()">改</span>
                    </div>
                </ul>
            </div>
            
        </li>
        <div class="friend">
            <img src="https://img1.baidu.com/it/u=1936314775,1023060290&fm=26&fmt=auto" alt="">
            <div class="info">
                <li>
                    <span>ID</span>
                    <span class="ID"></span>
                </li>
                <hr>
                <li>
                    <span>姓名</span>
                    <span class="username"></span>
                </li>
                <hr>
                <li>
                    <span>电话</span>
                    <span class="phonenum"></span>
                </li>
            </div>
        </div>
        <div class="friend">
            <img src="https://img1.baidu.com/it/u=1936314775,1023060290&fm=26&fmt=auto" alt="">
            <div class="info">
                <li>
                    <span>ID</span>
                    <span class="ID"></span>
                </li>
                <hr>
                <li>
                    <span>姓名</span>
                    <span class="username"></span>
                </li>
                <hr>
                <li>
                    <span>电话</span>
                    <span class="phonenum"></span>
                </li>
            </div>
        </div>
        <div class="friend">
            <img src="https://img1.baidu.com/it/u=1936314775,1023060290&fm=26&fmt=auto" alt="">
            <div class="info">
                <li>
                    <span>ID</span>
                    <span class="ID"></span>
                </li>
                <hr>
                <li>
                    <span>姓名</span>
                    <span class="username"></span>
                </li>
                <hr>
                <li>
                    <span>电话</span>
                    <span class="phonenum"></span>
                </li>
            </div>
        </div>
        <div class="friend">
            <img src="https://img1.baidu.com/it/u=1936314775,1023060290&fm=26&fmt=auto" alt="">
            <div class="info">
                <li>
                    <span>ID</span>
                    <span class="ID"></span>
                </li>
                <hr>
                <li>
                    <span>姓名</span>
                    <span class="username"></span>
                </li>
                <hr>
                <li>
                    <span>电话</span>
                    <span class="phonenum"></span>
                </li>
            </div>
        </div>
        <div class="friend">
            <img src="https://img1.baidu.com/it/u=1936314775,1023060290&fm=26&fmt=auto" alt="">
            <div class="info">
                <li>
                    <span>ID</span>
                    <span class="ID"></span>
                </li>
                <hr>
                <li>
                    <span>姓名</span>
                    <span class="username"></span>
                </li>
                <hr>
                <li>
                    <span>电话</span>
                    <span class="phonenum"></span>
                </li>
            </div>
        </div>
        <div class="friend">
            <img src="https://img1.baidu.com/it/u=1936314775,1023060290&fm=26&fmt=auto" alt="">
            <div class="info">
                <li>
                    <span>ID</span>
                    <span class="ID"></span>
                </li>
                <hr>
                <li>
                    <span>姓名</span>
                    <span class="username"></span>
                </li>
                <hr>
                <li>
                    <span>电话</span>
                    <span class="phonenum"></span>
                </li>
            
            </div>
        </div>
        <div class="friend">
            <img src="https://img1.baidu.com/it/u=1936314775,1023060290&fm=26&fmt=auto" alt="">
            <div class="info">
                <li>
                    <span>ID</span>
                    <span class="ID"></span>
                </li>
                <hr>
                <li>
                    <span>姓名</span>
                    <span class="username"></span>
                </li>
                <hr>
                <li>
                    <span>电话</span>
                    <span class="phonenum"></span>
                </li>
                
            </div>
        </div>
        <div class="friend">
            <img src="https://img1.baidu.com/it/u=1936314775,1023060290&fm=26&fmt=auto" alt="">
            <div class="info">
                <li>
                    <span>ID</span>
                    <span class="ID"></span>
                </li>
                <hr>
                <li>
                    <span>姓名</span>
                    <span class="username"></span>
                </li>
                <hr>
                <li>
                    <span>电话</span>
                    <span class="phonenum"></span>
                </li>
                
            </div>
        </div>
        <div class="friend">
            <img src="https://img1.baidu.com/it/u=1936314775,1023060290&fm=26&fmt=auto" alt="">
            <div class="info">
                <li>
                    <span>ID</span>
                    <span class="ID"></span>
                </li>
                <hr>
                <li>
                    <span>姓名</span>
                    <span class="username"></span>
                </li>
                <hr>
                <li>
                    <span>电话</span>
                    <span class="phonenum"></span>
                </li>
                
            </div>
        </div>
        <div class="friend">
            <img src="https://img1.baidu.com/it/u=1936314775,1023060290&fm=26&fmt=auto" alt="">
            <div class="info">
                <li>
                    <span>ID</span>
                    <span class="ID"></span>
                </li>
                <hr>
                <li>
                    <span>姓名</span>
                    <span class="username"></span>
                </li>
                <hr>
                <li>
                    <span>电话</span>
                    <span class="phonenum"></span>
                </li>

            </div>
        </div>
    </ul>
</body>
<script src="../js/ajax.js"></script>
<script src="../js/mailList.js"></script>
<script>
    
    window.onload = () => {
        const IDs = document.getElementsByClassName('ID')
        const usernames = document.getElementsByClassName('username')
        const phonenums = document.getElementsByClassName('phonenum')
        
        const ID = IDs[0]
        const username = usernames[0]
        const phonenum = phonenums[0]
        
        ID.innerHTML = sessionStorage.getItem('id') || -1
        username.innerHTML = sessionStorage.getItem('username') || '沈俞佑'
        phonenum.innerHTML = sessionStorage.getItem('phonenum') || 18788937085

        // 查找所有联系人的资料
        AJAX_callback('POST', 'select', ID.innerHTML, {IDs, usernames, phonenums})

       

   }
    const about = () => {
        alert('我是西南石油大学计算机科学学院2020级的一名学生，目前常驻学生科技团队。虽然对软件开发很感兴趣，也能随便选专业，但是我就是选物联网——诶，就是玩！（玩笑话）')
        alert('前段时间在复习之余一直在学Node.JS。正好呀，本来就有想实战一下的想法，数据库学科的大作业说来就来了！')
        alert('这个项目算不上精致，但是是我第一次拿JS写后端的作品，所以也称得上是具有里程碑意义的了！希望老师能够高抬贵手给高一点分，真的改bug已经36小时没合眼了！')
        alert('后面我也打算把这个项目上传到自己的git仓库，毕竟这也算是项目经验嘛！学习计算机技术真的是很有意思的事情！')
    }
    const add = () => {
        let addid = prompt('请输入用户id','') + 1 // 下标从0开始所以+1 
        let id = sessionStorage.getItem('id')  
        AJAX('POST', 'add', {'addid': addid, 'id':id})
    }
    const deleteFunc = () => {
        let deleteid = prompt('请输入用户id','')
        let id = sessionStorage.getItem('id')
        AJAX('POST', 'delete', {'delete': deleteid, 'id':id})
    }
    const change = () => {
        let newName = prompt('修改姓名,如果不需要修改则直接确定','')
        let newPswd = prompt('修改密码,如果不需要修改则直接确定','')
        let newPhonenum = prompt('修改电话号码,如果不需要修改则直接确定','')
        let id = sessionStorage.getItem('id')
        if(newName.length< 2 || newName == '')
            newName = sessionStorage.getItem('username')
        if((Number)(newPhonenum) < 10000000000 || (Number)(newPhonenum) > 20000000000 || newPhonenum == '')
            newPhonenum = sessionStorage.getItem('phonenum')  
        if(newPswd == '')
            newPswd = sessionStorage.getItem('password')
        AJAX('POST', 'change', {'name': newName, 'pswd':newPswd, 'phonenum':newPhonenum, 'id':id})    
    }

</script>
</html>